<template>
<div class="winPop" @click.stop>
  <div class="cont win" v-if="winState==1">
    <h2>运气真棒<br/>恭喜您获得</h2>
    <div class="box">
      <!--<em>{{winInfo.adardlevel}}</em>-->
      <p>{{winInfo.content}}</p>
    </div>
  </div>
  <div class="cont no" v-else>
    <h2>很遗憾<br/>您没有中奖</h2>
    <p>不要放弃，下一次抽奖时间再来吧</p>
  </div>
  <button class="btnStyle btn1" @click="homePopEdit(3)" v-if="winState==1">立即领取</button>
  <button class="btnStyle btn1" @click="homePopEdit(0)" v-else>确认</button>
</div>
</template>

<script>
import {mapMutations} from 'vuex';
export default{
  data:()=>{
    return{
    }
  },
  props:['winState','winInfo'],
  mounted(){
  },
  methods:{
    ...mapMutations(['homePopEdit'])
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.winPop{
  width:350px;
  height:346px;
  background:url('~@img/popBg.png');
  background-size:100% 100%;
  display:flex;
  flex-direction:column;
  .cont{
    flex:1;
    margin-top:30px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    &.win{
      h2{
        color:#FE3A3B;
        font-size:18px;
        line-height:1.2;
      }
      .box{
        margin-top:17px;
        background-image: linear-gradient(90deg, #FFCF62 0%, #FFEBBD 50%, #FCD781 100%);
        box-shadow: 0 3px 3px 0 rgba(223,138,21,0.39);
        border-radius: 4px;
        width:244px;
        height:82px;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        em{
        }
        p{
          font-size:24px;
          color:#FE3A3B;
        }
      }
    }
    &.no{
      h2{
        font-size:24px;
        color:#FE3A3B;
        font-weight:bold;
      }
      p{
        margin-top:10px;
        font-size:12px;
        color:#BBBBBB;
      }
    }
  }
  .btnStyle{
    margin:30px auto 40px;
    width:250px;
    color:#FF0120;
    font-size:20px;
    box-shadow: 0 4px 6px 2px rgba(250,52,52,0.32);
    background:linear-gradient(-180deg,#FAD961 0%, #f79c3d 100%)!important;
  }
}
</style>
